<template>
    <!--设置密码-->
    <div class="registerBar">
        <form>
            <div class="input-bar-item">
                <div class="label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <span>设置密码</span>
                </div>
                <div class="input-bar">
                    <input type="password" name="password" v-model="formData.password" v-validate="'required|min:8|max:20'"  placeholder="密码为8-20位字母，数字或符号组合" :style="{paddingRight: iptStyle}" @input="pressPwd">
                    <p role="alert" v-show="errors.has('password')" class="toast-text-style">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('password') }}
                    </p>
                    <div class="font-item" v-show="isShowIcon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                        <svg class="icon xianshi" aria-hidden="true">
                            <use xlink:href="#icon-xianshi"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </form>
        <btn @handleSubmit="handleSubmit">确定</btn>
    </div>
</template>

<script>
    import btn from "@/components/btn/btn";
    export default {
        name: "pwdSet",
        data() {
            return {
                formData: {
                    password: '', // 密码
                },
                iptStyle: 'unset',
                isShowIcon: false,
            }
        },
        methods: {
            pressPwd() {
                if (this.formData.password) {
                    this.iptStyle = '100px'
                    this.isShowIcon = true
                }else {
                    this.iptStyle = 'unset'
                    this.isShowIcon = false
                }
            },
            /*
            * 设置密码 即是注册成功
            * */
            handleSubmit() {
                this.$validator.validate()
                    .then(valid => {

                        // 规则限制验证成功
                        if (valid) {

                            // 在这里将用户手机号和密码提交给后台即可

                            // 注册成功后跳转到登录界面
                            this.$router.replace({
                                path: '/login',
                                name: 'login'
                            })
                        }
                    })
            }
        },
        components: {
            btn
        }
    }
</script>

<style scoped>

</style>